/*
 * @Author: zyk 997610780@qq.com
 * @Date: 2022-10-19 14:11:39
 * @LastEditors: zyk 997610780@qq.com
 * @LastEditTime: 2022-10-20 13:47:48
 * @FilePath: \fifty-small-projects\44滑块选择器\44.js
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
let mobile_dot = document.querySelector('.mobile_dot')
let slider_box = document.querySelector('.slider')
let number_box = document.querySelector('.number')
let is_click = false

slider_box.addEventListener('mousemove',(e)=>{
  if (is_click && e.target != mobile_dot) {
    number_box.innerText = progress(e.offsetX).toFixed(0)
    if(e.offsetX + 10 >= 300){
      mobile_dot.style.left = `calc(100% - 10px)`
      number_box.innerText = '100'
    }else{
      mobile_dot.style.left = e.offsetX + 'px'
    }
  }
  e.stopPropagation()
})


mobile_dot.addEventListener('mousedown',(event)=>{
  is_click = true
})

window.addEventListener('mouseup',()=>{
  is_click = false
})

function progress(v){
  return (v / 300) * 100
}
const scale = (num, in_min, in_max, out_min, out_max) => {
  return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}